<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>系统概览·思通投研·让数据驱动投资价值!</title>
	<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css" rel="stylesheet">
	<link href="${pageContext.request.contextPath }/img/webLogoIcon.png" rel="shortcut icon">
    <!-- Morris -->
    <link href="${pageContext.request.contextPath }/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css" rel="stylesheet">
</head>
<body>
    <div id="wrapper">
    	<nav class="navbar-default navbar-static-side" role="navigation">
            <%request.setAttribute("LEFT", "system_overview");%>
			<%@include file="left.jsp"%>
        </nav>
        
        <div id="page-wrapper" class="gray-bg">
	        <div class="row border-bottom">
	        	<jsp:include page="head.jsp" flush="true" />
	        </div>
	        <div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-9">
					<h2>系统概览</h2>
				</div>
			</div>
        <div class="wrapper wrapper-content">
<!-- allData start -->
		<div id="createAlldata">
<!-- 		<div class="row" > -->
<!--             <div class="col-lg-3"> -->
<!--                 <div class="ibox float-e-margins"> -->
<!--                     <div class="ibox-title"> -->
<!--                         <span class="label label-success pull-right">总</span> -->
<!--                         <h5>抓取总量</h5> -->
<!--                     </div> -->
<!--                     <div class="ibox-content"> -->
<!--                         <h1 class="no-margins">386,200111</h1> -->
<!--                     </div> -->
<!--                 </div> -->
<!--             </div> -->
            
<!--             <div class="col-lg-3"> -->
<!--                 <div class="ibox float-e-margins"> -->
<!--                     <div class="ibox-title"> -->
<!--                     <span class="label label-primary pull-right"><span id="updateDate">/-----/-----/</span></span> -->
<!--                         <h5>今日抓取</h5> -->
<!--                     </div> -->
<!--                     <div class="ibox-content"> -->
<!--                         <h1 class="no-margins">80,800</h1> -->
<!--                     </div> -->
<!--                 </div> -->
<!--             </div> -->

<!--             <div class="col-lg-3"> -->
<!--                 <div class="ibox float-e-margins"> -->
<!--                     <div class="ibox-title"> -->
<!--                         <span class="label label-info pull-right">周</span> -->
<!--                         <h5>一周抓取</h5> -->
<!--                     </div> -->
<!--                     <div class="ibox-content"> -->
<!-- 						<h1 class="no-margins">406,42</h1> -->
<!--                     </div> -->
<!--                 </div> -->
<!--             </div> -->
            
<!--             <div class="col-lg-3"> -->
<!--                 <div class="ibox float-e-margins"> -->
<!--                     <div class="ibox-title"> -->
<!--                         <span class="label label-primary pull-right" >月</span> -->
<!--                         <h5>当月抓取</h5> -->
<!--                     </div> -->
<!--                     <div class="ibox-content"> -->
<!-- 						 <h1 class="no-margins">251,66</h1> -->
<!--                     </div> -->
<!--                 </div> -->
<!--             </div> -->
            
<!--         </div> -->
        
		</div>
<!-- allData end -->


        <div class="row">
            <div class="col-lg-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div>
                                        <span class="pull-right text-right">
                                        <small>过去一个月平均每日存储量: <strong>2.08G</strong></small>
                                            <br/>
                                            当前总存储量: 612.8G
                                        </span>
                            <h3 class="font-bold no-margins">
                                系统数据存储量统计分析
                            </h3>
                            <small>统计量包含PDF和JPG</small>
                        </div>

                        <div class="m-t-sm">

                            <div class="row">
                                <div class="col-md-8">
                                    <div>
                                    	<div class="flot-chart-content" id="flot-chart1" style="display: none;"></div>
                                        <canvas id="lineChart" height="114"></canvas>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <ul class="stat-list m-t-lg">
                                        <li>
                                            <h2 class="no-margins">2.63G</h2>
                                            <small>比昨日增长</small>
                                            <div class="progress progress-mini">
                                                <div class="progress-bar" style="width: 48%;"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <h2 class="no-margins ">22.4G</h2>
                                            <small>比上周增长</small>
                                            <div class="progress progress-mini">
                                                <div class="progress-bar" style="width: 60%;"></div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>

                        <div class="m-t-md">
                            <small class="pull-right">
                                <i class="fa fa-clock-o"> </i>
                                更新于 <span id="updateDatez">2019-11-13</span>
                            </small> 
                            <small>
                                <strong>存储量分析:</strong>当前可用空间还剩 14.85T.
                            </small>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-warning pull-right">数据更新于<span id="updateDatex">2019-1-13</span></span>
                        <h5>系统应用服务器存储数据统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4">
                                <small class="stats-label">服务器名称</small>
                                <h4>Elasticsearch </h4>
                            </div>

                            <div class="col-xs-4">
                                <small class="stats-label">可用空间</small>
                                <h4>46.11%</h4>
                            </div>
                            <div class="col-xs-4">
                                <small class="stats-label">存储容量</small>
                                <h4>432.02G</h4>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4">
                                <small class="stats-label">服务器名称</small>
                                <h4>Hadoop/Hive </h4>
                            </div>

                            <div class="col-xs-4">
                                <small class="stats-label">可用空间</small>
                                <h4>72.43%</h4>
                            </div>
                            <div class="col-xs-4">
                                <small class="stats-label">存储容量</small>
                                <h4>756.54G</h4>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-xs-4">
                                <small class="stats-label">服务器名称</small>
                                <h4>Mongodb </h4>
                            </div>

                            <div class="col-xs-4">
                                <small class="stats-label">可用空间</small>
                                <h4>50.23%</h4>
                            </div>
                            <div class="col-xs-4">
                                <small class="stats-label">存储容量</small>
                                <h4>424.09G</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!--  插入新表格1开始 -->
        <div class="row">
        <div class="col-lg-8">
        <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>系统数据索引目录</h5>
        </div>
        <div class="ibox-content">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>      
                        <th>编号</th>
                        <th>数据分类 </th>
                        <th>采集数量 </th>
                        <th>子栏目数量 </th>
                        <th>更新时间 </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td><small>热点资讯</small></td>
                        <td>1432,183</td>
                        <td>8</td>
                        <td><span id="updateTime0">2019-1-14</span></td>
                    </tr>

                    <tr>
                        <td>2</td>
                        <td><small>券商研报</small></td>
                        <td>984,332</td>
                        <td>5</td>
                        <td><span id="updateTime1">2019-1-14</span></td>
                    </tr>

                    <tr>
                        <td>3</td>
                        <td><small>股票市场</small></td>
                        <td>28,543</td>
                        <td>11</td>
                        <td><span id="updateTime2">2019-1-14</span></td>
                    </tr>

                    <tr>
                        <td>4</td>
                        <td><small>全球资讯</small></td>
                        <td>432,183</td>
                        <td>8</td>
                        <td><span id="updateTime3">2019-1-14</span></td>
                    </tr>

                </tbody> </table></div>
        </div> </div> </div>  
        <!--插入新表格1结束-->


        <!--  插入新表格2开始 -->
       
        <div class="col-lg-4">
        <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>系统API接口调用</h5>
        </div>
        <div class="ibox-content">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>      
                        <th>编号</th>
                        <th>数据接口分类 </th>
                        <th>调用次数 </th>
                        <th>更新时间 </th>
                    </tr>  
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td><small>热点资讯</small></td>
                        <td>332,121</td>
                        <td><span id="updateTimes0">2019-1-14</span></td>
                    </tr>

                    <tr>
                        <td>2</td>
                        <td><small>股票市场</small></td>
                        <td>328,412</td>
                        <td><span id="updateTimes1">2019-1-14</span></td>
                    </tr>

                    <tr>
                        <td>3</td>
                        <td><small>券商研报</small></td>
                        <td>28,543</td>
                        <td><span id="updateTimes2">2019-1-14</span></td>
                    </tr>

                    <tr>
                        <td>4</td>
                        <td><small>全球资讯</small></td>
                        <td>121,901</td>
                        <td><span id="updateTimes3">2019-1-14</span></td>
                    </tr>



                </tbody> </table></div>
        </div> </div> </div> </div>
        <!--插入新表格2结束-->





        <div class="row">

        <div class="col-lg-12">
        <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>服务器资源清单与使用状态</h5>
        </div>
        <div class="ibox-content">
            <div class="row">
                <div class="col-sm-9 m-b-xs">
                   <!-- <div data-toggle="buttons" class="btn-group">
                        <label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options"> 日 </label>
                        <label class="btn btn-sm btn-white active"> <input type="radio" id="option2" name="options"> 周 </label>
                        <label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options"> 月 </label>
                    </div> -->
                </div>
                <div class="col-sm-3">
                    <!--
                    <div class="input-group"><input type="text" placeholder="输入搜索内容" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> 搜索!</button> </span></div>
                    -->
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>

                        <th>#</th>
                        <th>服务器名称</th>
                        <th>所在地 </th>
                        <th>IP地址 </th>
                        <th>磁盘存储(剩余) </th>
                        <th>系统内存(剩余) </th>
                        <th>CPU使用率</th>
                        <th>启动时间</th>
                        <th>当前状态</th>
                    </tr>
                    </thead>

                    <!--
                    服务器名称，IP地址,磁盘存储(剩余)，系统内存(剩余)，CPU使用率，启动时间，当前状态
                    爬虫服务器-阿里云，192.168.71.49，800G/530G，32G/25G, 20%，2018-10-23，OK
                    -->
                    <tbody>
                    	<c:forEach items="${list}" var="serverResource" varStatus="xh">
	                    <tr>
	                        <td>${xh.count}</td>
	                        <td><small>${serverResource.servername }</small></td>
	                        <td>${serverResource.serveraddress }</td>
	                        <td>${serverResource.ipaddress }</td>
	                        <td>${serverResource.diskstorageremain }</td>
	                        <td>${serverResource.systemmemoryremain }<span class="pie">0.52/1.561</span> </td>
	                        <td>${serverResource.cpuusage }</td>
	                        <td>${serverResource.starttime }</td>
	                        <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
	                    </tr>
	                    </c:forEach>
                    </tbody>
                </table>
            </div>

        </div>
        </div>
        </div>

        </div>


        </div>
        <jsp:include page="footer.jsp" flush="true" />
        </div>
    </div>

    <!-- Mainly scripts -->
    <script src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

    <!-- Flot -->
    <script src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/flot/curvedLines.js"></script>

    <!-- Peity -->
    <script src="${pageContext.request.contextPath }/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/demo/peity-demo.js"></script>

    <!-- Custom and plugin javascript -->
    <script src="${pageContext.request.contextPath }/js/inspinia.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/pace/pace.min.js"></script>

    <!-- jQuery UI -->
    <script src="${pageContext.request.contextPath }/js/plugins/jquery-ui/jquery-ui.min.js"></script>

    <!-- Jvectormap -->
    <script src="${pageContext.request.contextPath }/js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

    <!-- Sparkline -->
    <script src="${pageContext.request.contextPath }/js/plugins/sparkline/jquery.sparkline.min.js"></script>

    <!-- Sparkline demo data  -->
    <script src="${pageContext.request.contextPath }/js/demo/sparkline-demo.js"></script>

    <!-- ChartJS-->
    <script src="${pageContext.request.contextPath }/js/plugins/chartJs/Chart.min.js"></script>
     <script src="${pageContext.request.contextPath }/js/moment.js"></script>   
    <script>
        $(document).ready(function() {
			
//         	updateDate();
        	updateTime();
        	
            var d1 = [[1262304000000, 6], [1264982400000, 3057], [1267401600000, 20434], [1270080000000, 31982], [1272672000000, 26602], [1275350400000, 27826], [1277942400000, 24302], [1280620800000, 24237], [1283299200000, 21004], [1285891200000, 12144], [1288569600000, 10577], [1291161600000, 10295]];
            var d2 = [[1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 6129], [1272672000000, 11643], [1275350400000, 19055], [1277942400000, 30062], [1280620800000, 39197], [1283299200000, 37000], [1285891200000, 27000], [1288569600000, 21000], [1291161600000, 17000]];

            var data1 = [
                { label: "Data 1", data: d1, color: '#17a084'},
                { label: "Data 2", data: d2, color: '#127e68' }
            ];
            $.plot($("#flot-chart1"), data1, {
                xaxis: {
                    tickDecimals: 0
                },
                series: {
                    lines: {
                        show: true,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 1
                            }, {
                                opacity: 1
                            }]
                        },
                    },
                    points: {
                        width: 0.1,
                        show: false
                    },
                },
                grid: {
                    show: false,
                    borderWidth: 0
                },
                legend: {
                    show: false,
                }
            });

            var lineData = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        label: "Example dataset",
                        fillColor: "rgba(220,220,220,0.5)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: [65, 59, 40, 51, 36, 25, 40]
                    },
                    {
                        label: "Example dataset",
                        fillColor: "rgba(26,179,148,0.5)",
                        strokeColor: "rgba(26,179,148,0.7)",
                        pointColor: "rgba(26,179,148,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(26,179,148,1)",
                        data: [48, 48, 60, 39, 56, 37, 30]
                    }
                ]
            };

            var lineOptions = {
                scaleShowGridLines: true,
                scaleGridLineColor: "rgba(0,0,0,.05)",
                scaleGridLineWidth: 1,
                bezierCurve: true,
                bezierCurveTension: 0.4,
                pointDot: true,
                pointDotRadius: 4,
                pointDotStrokeWidth: 1,
                pointHitDetectionRadius: 20,
                datasetStroke: true,
                datasetStrokeWidth: 2,
                datasetFill: true,
                responsive: true,
            };


            var ctx = document.getElementById("lineChart").getContext("2d");
            var myNewChart = new Chart(ctx).Line(lineData, lineOptions);

        });
        
        
        function updateDate(){
        	moment().format('YYYY-MM-DD HH:mm:ss');
        	var myDate10 = moment().subtract('days', 0).format('YYYY-MM-DD');
        	document.getElementById("updateDate").innerHTML=myDate10;
        	document.getElementById("updateDatez").innerHTML=myDate10;
        	document.getElementById("updateDatex").innerHTML=myDate10;
        	
        }
        
        function updateTime(){
        	moment().format('YYYY-MM-DD HH:mm:ss');
        	for(var i=0;i<4;i++){
        		var hours = moment().subtract('hours', 4-i).format('YYYY-MM-DD HH');
            	var minus = moment().subtract('minutes',5+i).format("mm:ss");
            	var hours1 = moment().subtract('hours', 3-i).format('YYYY-MM-DD HH');
            	var minus1 = moment().subtract('minutes',2+i).format("mm:ss");
            	var times = hours + ":" + minus;
            	var times1 = hours1 + ":" + minus1;
            	var updateTime = "updateTime"+i;
            	var updateTimes = "updateTimes"+i;
            	document.getElementById(updateTime).innerHTML=times;
            	document.getElementById(updateTimes).innerHTML=times;
        	}
        	
        	
        	
        }
        
        //走马灯方法
//         function init(){
// 		    //获取标题
// 		    var title=document.title;
// 		    //分割字符串--->字符数组
// 		    var arr=title.split("");
// 		    //删除第一个元素并返回该元素
// 		    var e=arr.shift();
// 		    //把一个对象添加到数组末尾
// 		    arr.push(e);
// 		    //把数组转换成字符串
// 		    var marquee=arr.join("");
// 		    //返回给浏览器
// 		    document.title=marquee;
// 		    //定时一直执行
// 		    window.setTimeout("init()",1000);
// 		}
// 		window.onload=init;
        
		
		/* 数据显示部分 */
        var totalData = {
				"alldata":123456,
				"today":999,
				"week":888,
				"month":7777,
				"name":"全部抓取总量"
			}
        var engineData = {
        		"alldata":21313,
				"today":123213,
				"week":23123,
				"month":12312312,
				"name":"搜索引擎抓取总量"
			}
        var clientData = {
				"alldata":123456,
				"today":999,
				"week":888,
				"month":7777,
				"name":"客户端抓取总量"
			}
        var inviteData = {
				"alldata":123456,
				"today":999,
				"week":888,
				"month":7777,
				"name":"招聘抓取总量"
			}
	//获取当前时间
	alldatadate()
	   function alldatadate(){
	       	moment().format('YYYY-MM-DD HH:mm:ss');
	       	return moment().subtract('days', 0).format('YYYY-MM-DD');
		}
	var datadate = alldatadate()
	console.log(alldatadate(),"++++")	
    greatalldata(totalData,datadate)
	greatalldata(engineData,datadate)
	greatalldata(clientData,datadate)
	greatalldata(inviteData,datadate)
    
    // 生成数据总量

	function greatalldata(data) {
		console.log(data)
		var alldatabox = ''
		alldatabox +=
		'<div class="row" >'+
        '    <div class="col-lg-3">'+
        '        <div class="ibox float-e-margins">'+
        '            <div class="ibox-title">'+
        '                <span class="label label-success pull-right">总</span>'+
        '                <h5>'+ data.name +'</h5>'+
        '            </div>'+
        '            <div class="ibox-content">'+
        '                <h1 class="no-margins">'+data.alldata+'</h1>'+
        '            </div>'+
        '        </div>'+
        '    </div>'+
        '    <div class="col-lg-3">'+
        '        <div class="ibox float-e-margins">'+
        '            <div class="ibox-title">'+
        '            <span class="label label-primary pull-right"><span>'+ datadate +'</span></span>'+
        '                <h5>今日抓取</h5>'+
        '            </div>'+
        '            <div class="ibox-content">'+
        '                <h1 class="no-margins">'+data.today+'</h1>'+
        '            </div>'+
        '        </div>'+
        '    </div>'+
        '    <div class="col-lg-3">'+
        '        <div class="ibox float-e-margins">'+
        '            <div class="ibox-title">'+
        '                <span class="label label-info pull-right">周</span>'+
        '                <h5>一周抓取</h5>'+
        '            </div>'+
        '            <div class="ibox-content">'+
		'				<h1 class="no-margins">'+data.week+'</h1>'+
        '            </div>'+
        '        </div>'+
        '    </div>'+
        '    <div class="col-lg-3">'+
        '        <div class="ibox float-e-margins">'+
        '            <div class="ibox-title">'+
        '                <span class="label label-primary pull-right" >月</span>'+
        '                <h5>当月抓取</h5>'+
        '            </div>'+
        '            <div class="ibox-content">'+
		'				 <h1 class="no-margins">'+data.month+'</h1>'+
        '            </div>'+
        '        </div>'+
        '    </div>'+
        '</div>'
      $("#createAlldata").append(alldatabox)
      console.log("end")
	}
    </script>
</body>
</html>
